<template>
    <div>
        <el-container>
      <el-header>
        <div id="title">课程班级</div>
                <div><i class="el-icon-search" id="icon"></i></div>
                <el-input  placeholder="搜索课程" id="input"></el-input>
                <div id="jia">加入班级</div>
                <div id="tong">通知</div>
                <div><i class="el-icon-user-solid" id="icon1" @click="handleicon"></i></div>
      </el-header>
      <el-main style="background-color: white;">
        <div id="T1">{{ task.TaskName }}</div>
        <div id="T2">
            <el-button type="primary" round v-if="task.State=='提交中'">提交中</el-button>
            <el-button type="success" round v-if="task.State=='补交中'">补交中</el-button>
            <el-button type="danger" round v-if="task.State=='已截至'">已截至</el-button>
        </div>
        <div id="T3" @click="des(id)">作业描述</div>
        <div id="T4" @click="cont(id)">作业内容</div>
        <div id="T6">老师评价</div>
        <div id="T5">{{ task.Assessment }}</div>
      </el-main>
    </el-container>
    </div>
    </template>
    <style>
    #T6{
        border: 1px solid black;
        background-color: rgb(135, 237, 237);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 200px;
        left: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
    }
    #T5{
        border: 1px solid;
        height: 45%;
        width: 80%;
        position: absolute;
        left: 10%;
        top: 40%;
        padding: 5px;
        text-align: left;
    }
    #T4{
        border: 1px solid;
        background-color: rgb(255, 255, 255);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 200px;
        left: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    #T3{
        border: 1px solid black;
        background-color: rgb(255, 255, 255);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 200px;
        left: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: black;
    }
    #T2{
        position: absolute;
        top: 15%;
        left: 16%;
    }
    #T1{
        font-size: 30px;
        font-weight: 700;
        position: absolute;
        top: 15%;
        left:5%
    }
    .grid-cotainer{
    display:grid;
    grid-template-columns: repeat(3,300px);
    grid-gap:50px;
}

  .el-header{
    background-color: rgb(85,85,85);
    color: #333;
    text-align: center;
    line-height: 80px;
  }

  
  #title{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:80px;
  }
  #icon{
    color: white;
    font-size: 25px;
    position: absolute;
    top:30px;
    left:700px;
  }
  #input{
    height:33px;
    width:230px;
    position: absolute;
    top:-30px;
    left:700px;
  }
  #jia{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1000px;
  }
  #tong{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1200px;
  }
  #icon1{
    color: white;
    font-size:40px;
    position: absolute;
    top:20px;
    left: 1350px;
  }
    </style>
    <script>
    import axios from 'axios';
    export default{
        data(){
            return{
              courseid:'',
                id:'',
                task:null
            }
        },
        methods:{
            cont(id){
                this.$router.push({
                    name:'FinCommit',
                    params:{
                        id:id,
                        curseid:this.courseid
                    }
                })
            },
            des(id){
                this.$router.push({
                    name:'FinishedDescribe',
                    params:{
                        id:id,
                        curseid:this.courseid
                    }
                })
            },
            
        },
        async created(){
            this.id=this.$route.params.id
            //传出 id-任务id courseid-课程id
            //传入 Taskname-任务名 State-任务状态 Assessment-老师的评价
            await axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/244179351?apifoxApiId=244179351',{
            id:this.id,
            courseid:this.courseid
          }).then(res=>{
            this.task=res.data
          })
        }
    }
    </script>